<template>
	<view class="container">
		<view class="top">
			<image src="../../static/my_img/friends_list_bg.png" mode=""></image>
			<view class="count_show">
				<view class="ago">
					<text class="font54">780</text>
					<text class="font26">已激活会员</text>
				</view>
				<view class="will">
					<text class="font54">200</text>
					<text class="font26">未激活会员</text>
				</view>
			</view>
		</view>
		<view class="bot">
			<view class="bot_box m_t30">
				<view class="tabs">
					<scroll-view id="tab-bar" class="uni-swiper-tab font32" scroll-x :scroll-left="scrollLeft">
						<view v-for="(tab,index) in tabBars" :key="index" class="swiper-tab-list" style="width: 50%;" :class="tabIndex==index ? 'active' : ''"
						 :data-current="index" @click="tapTab(index)">
							<view>{{tab.name}}</view>
						</view>
					</scroll-view>
				</view>
				<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
					<swiper-item v-for="(item,index) in tabBars" :key="index">
						<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)">
							<view class="business" v-for="(item,index) in members" :key="index">
								<view class="business_box pd_lr30">
									<view class="box_left">
										<text class="font34">{{item.number}}</text>
										<text class="font26 color666">{{item.date}}</text>
									</view>
									<view class="box_right">
										{{item.state == 1 ? "已激活" : "未激活"}}
									</view>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0, //tab下标
				scrollLeft: 0,
				tabBars: [{
					name: '已激活会员',
					id: '1'
				}, {
					name: '未激活会员',
					id: '2'
				}],
				members: [{
					"number": "18236937830",
					"date": "2019-05-25",
					"state": "0"
				},{
					"number": "13598411196",
					"date": "2019-05-23",
					"state": "1"
				},{
					"number": "13569659200",
					"date": "2019-05-22",
					"state": "0"
				},{
					"number": "17611376128",
					"date": "2019-05-21",
					"state": "1"
				},{
					"number": "15939284866",
					"date": "2019-05-20",
					"state": "1"
				}]
			}
		},
		methods: {
			// 点击tab切换
			tapTab(index) {
				if (this.tabIndex === index) {
					return false;
				} else {
					let tabBar = this.getElSize("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.tabIndex = index;
				}
			},
			//跟着切换
			changeTab(e) {
				let index = e.detail.current;
				let tabBar = this.getElSize("tab-bar"),
					tabBarScrollLeft = tabBar.scrollLeft;
				this.tabIndex = index;
			},
			//得到元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					uni.createSelectorQuery().select('#' + id).fields({
						size: true,
						scrollOffset: true
					}, (data) => {
						res(data);
					}).exec();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		overflow: hidden;
	}

	.container {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.top {
			width: 100%;
			display: flex;
			position: relative;

			image {
				width: 100%;
			}

			.count_show {
				width: 520upx;
				height: 200upx;
				position: absolute;
				bottom: 84upx;
				left: 104upx;
				display: flex;
				color: #40260b;

				view {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}

				.ago {
					border-right: 2upx dashed #9a8959;
				}
			}

		}

		.bot {
			width: 100%;
			height: 58vh;
			display: flex;
			justify-content: center;
			background: #ff4343;
			padding-bottom: 30upx;
			
			.bot_box {
				width: 92vw;
				background: #f2f3ff;
				border-radius: 12upx;
			}
			
		}

		.uni-swiper-tab {
			border-bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.swiper-tab-list {
				width: 50%;
				background: #f2f3ff;
				display: inline-block !important;
				text-align: center;
				border-radius: 12upx;
			}

			.swiper-tab-list view {
				width: 50% !important;
				display: inline-block !important;
				height: 100upx;
				line-height: 100upx;
				box-sizing: border-box;
			}

			.active view {
				color: #5458B4;
				border-bottom: 4upx solid #6167e7;
			}
		}
		
		.swiper-box {
			height: 45vh !important;
			uni-swiper-item {
				overflow: auto;
			}
		}
		
		
		.uni-scroll-view{
			width: 80vw;
			height: 50vh !important;
			border-radius: 16px !important;
			background: #f2f3ff;
		}

		.list {
			background: #F5F4FA;

			.business {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				border: 1upx solid #EFEFF0;
				background: #fff;

				.business_box {
					width: 100%;
					padding: 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.box_left {
						width: 50%;
						display: flex;
						flex-direction: column;
					}
				}
			}
		}
	}
</style>
